<template>
  <div class="main">
    <div class="center">
      <button class="rules-btn" @click="showRulesFn"></button>
      <div class="bg-img eles">
        <!-- <img class="bg-img" src="@/assets/football/bg_red.jpg" /> -->
        <div class="logos">
          <div class="logo1"></div>
          <div class="logo2"></div>
        </div>
        <div class="long">
          <div class="long-bg">
            <div class="long-div">
              <img class="xiaoren-img" src="@/assets/football/足球小人.png" alt />
              <img class="xiaoqiu-img" src="@/assets/football/足球小球.png" alt />
              <img class="long-img" src="@/assets/football/龙.png" alt />
            </div>
            <img class="daren-img" src="@/assets/football/大人.png" alt />
            <img class="zuqiu-img" src="@/assets/football/足球.png" alt />
            <img class="dianji-img" src="@/assets/football/点击.png" alt />
          </div>
        </div>
        <div class="wenzi">
          <img class="wenzi1" src="@/assets/football/文字1.png" alt />
          <img class="wenzi2" src="@/assets/football/文字2.png" alt />
        </div>
        <div class="guize" @click="showRulesFn">
          <img src="@/assets/football/规则按钮.png" alt />
        </div>
      </div>
    </div>
    <div class="rules" v-show="rulesVisible">
      <div class="rules-center">
        <img src="@/assets/football/规则说明.png" alt />
        <i class="el-icon-circle-close close-rules" @click="closeRulesFn"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rulesVisible: false,
    }
  },
  methods: {
    showRulesFn() {
      this.rulesVisible = true
    },
    closeRulesFn() {
      this.rulesVisible = false
    },
  },
}
</script>
<style  lang='stylus' scoped>
.main {
  width: 100vw;
  height: 100vh;
  // background-color:rgba(0,0,0,0.6)
  // background-image: url('/assets/football/bg_red.jpg');
  position: fixed;
  overflow: hidden;
  z-index: 9999;
  left: 0;
  top: 0;

  .center {
    position: relative;
    box-shadow: 0 0 5px 1px #999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;

    .bg-img {
      width: 90%;
      height: 90%;
      border-radius: 20px;
      position: relative;
      background: url('../../../assets/football/bg_red.jpg') no-repeat;
      background-size: 100% 100%;

      .logos {
        .logo1 {
          background: url('../../../assets/football/logo1.png') no-repeat;
          width: 127px;
          height: 54px;
          position: absolute;
          left: 50px;
          top: 20px;
          // background-size 50%
        }

        .logo2 {
          background: url('../../../assets/football/logo2.png') no-repeat;
          width: 60px;
          height: 60px;
          position: absolute;
          left: 190px;
          top: 20px;
          background-size: 50%;
        }
      }

      .wenzi {
        position: absolute;
        right: -50px;
        bottom: 0px;
        transform: scale(0.5);

        .wenzi1 {
          display: block;
          margin-bottom: 20px;
        }

        .wenzi1 {
          display: block;
        }
      }

      .guize {
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .guize:hover, .zuqiu-img:hover {
        cursor: pointer;
      }

      .long {
        width: 640px;
        height: 80%;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);

        .long-bg {
          // background-color rgba(0,0,0,0.1)
          width: 640px;
          height: 640px;

          .long-div {
            width: 510px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            .xiaoren-img {
              width: 60px;
              position: absolute;
              left: 233px;
              top: 254px;
            }

            .xiaoqiu-img {
              width: 15px;
              position: absolute;
              left: 294px;
              top: 251px;
              opacity: 0;
              animation: shandong 3s infinite linear;
              animation-delay: 1s;
            }

            @keyframes shandong {
              50% {
                opacity: 0.8;
                transform: scale(0.8);
                translate(15px, 15px);
              }
            }

            .long-img {
              width: 100%;
              position: absolute;
              animation: longdong 5s infinite linear;
              animation-delay: 2s;
            }

            @keyframes longdong {
              50% {
                transform: translate(5px, 5px);
              }
            }
          }

          .daren-img {
            width: 370px;
            position: absolute;
            left: 80px;
            top: 320px;
            animation: fandong 3s 1 forwards linear;
            animation-delay: 2s;
          }

          @keyframes fandong {
            0% {
              transform: scale(1);
              rotate(0deg);
            }

            100% {
              transform: scale(0.9);
              rotate(3deg);
            }
          }

          .dianji-img {
            width: 30px;
            position: absolute;
            left: 450px;
            top: 680px;
            opacity: 0;
            animation: tishi 3s infinite linear;
            animation-delay: 3s;
          }

          @keyframes tishi {
            50% {
              opacity: 0.7;
              transform: translate(-10px, -10px);
            }
          }

          .zuqiu-img {
            width: 70px;
            position: absolute;
            // left: 390px;
            // top: 640px;
            left: 300px;
            top: 240px;
            transform: scale(0.2);
            animation: zuqiu 0.5s 1 forwards linear;
          }

          @keyframes zuqiu {
            100% {
              left: 390px;
              top: 640px;
              transform: scale(1);
            }

            80% {
              left: 400px;
              top: 540px;
              transform: scale(0.9);
            }

            60% {
              left: 410px;
              top: 440px;
              transform: scale(0.8);
            }

            40% {
              left: 400px;
              top: 340px;
              transform: scale(0.7);
            }

            35% {
              left: 390px;
              top: 320px;
              transform: scale(0.6);
            }

            20% {
              left: 380px;
              top: 300px;
              transform: scale(0.5);
            }

            15% {
              left: 370px;
              top: 280px;
              transform: scale(0.4);
            }

            10% {
              left: 360px;
              top: 260px;
              transform: scale(0.3);
            }

            0% {
              left: 300px;
              top: 240px;
              transform: scale(0.2);
            }
          }
        }
      }
    }

    .rules-btn {
      position: absolute;
      bottom: 12px;
      right: 18px;
      width: 50px;
      height: 35px;
      cursor: pointer;
      // background-color: #ccc;
      opacity: 0;
    }
  }

  .rules {
    position: absolute;
    width: 100%;
    background-color: rgba(0, 0, 0 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .rules-center {
      position: relative;

      .close-rules {
        position: absolute;
        top: 50px;
        font-size: 50px;
        color: #ccc;
        cursor: pointer;
      }
    }
  }
}
</style>
